<template>
  <view>
    <view class="fixed-btn">
      <button class="contact-btn" open-type="contact"></button>
      <button class="contact-tel-btn" @click="showPhoneDialog"></button>
	  <button class="contact-wecom-btn" @click="previewImage"></button>
    </view>
    <uni-popup ref="phonePopup" type="center">
      <uni-popup-dialog
        :type="msgType"
        cancelText="取消"
        confirmText="拨打电话"
        title="联系电话"
        content="13572116118"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'quick-button',
  data() {
    return {
		// 当前显示的小图地址（本地示例，需替换为实际图片路径）
	  currentImage: 'https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/9b551a2e39963cfd7af6f2975e927bf.jpg',
	  // 预览时使用的大图地址列表（可多个图片预览）
	  imageList: ['https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/9b551a2e39963cfd7af6f2975e927bf.jpg'],
      phoneNumber: '13572116118',
      phonePopup: null // 弹窗实例引用
    };
  },
  methods: {
	  previewImage() {
	       uni.previewImage({
	         current: this.currentImage, // 当前显示图片的链接
	         urls: this.imageList,       // 需要预览的图片链接列表
	         indicator: 'default',       // 指示器样式（default默认/none无/number数字）
	         loop: true,                 // 是否循环预览
	         longPressActions: {         // 长按保存图片配置（uniapp 3.4.0+支持）
	           itemList: ['保存图片', '取消'],
	           success: function(data) {
	             console.log('选中了第' + (data.tapIndex + 1) + '个按钮');
	           }
	         }
	       });
	     },
    dialogClose() {
      console.log('点击关闭');
    },
    dialogConfirm() {
      this.$refs.phonePopup.close();
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber // 这里填入你要拨打的电话号码
      });
    },
    showPhoneDialog() {
      this.$refs.phonePopup.open();
    },
    hidePhoneDialog() {
      this.$refs.phonePopup.close();
    },
    callPhone() {
      console.log(111);
      uni.makePhoneCall({
        phoneNumber: this.phoneNumber // 这里填入你要拨打的电话号码
      });

      this.hidePhoneDialog(); // 拨打电话后关闭弹窗
    }
  }
};
</script>

<style lang="scss">
.fixed-btn {
  position: fixed;
  right: 10rpx;
  bottom: 328rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  z-index: 999;
  // background: #ffffff69;
  padding: 5rpx;
  border-radius: 5rpx;
  // opacity: 0.5;
  .contact-btn {
    background: url("https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/ffd2462b5c7262fc5afb6fa11d1fd04.png")
      no-repeat center center;
    background-size: 80% 80%;
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 15rpx;
    opacity: 1;
  }

  .contact-tel-btn {
    background: url("https://bedfamily.eos.xian-2.cmecloud.cn/profile/xiaochengxu/static/a7c2b31321e8b0c759c5308590a4cbc.png")
      no-repeat center center;
    background-size: 80% 80%;
    width: 100rpx;
    height: 100rpx;
    opacity: 1;
  }
  .contact-wecom-btn {
    background: url("https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/gh_bc7be4760998_1280.jpg")
      no-repeat center center;
    background-size: 80% 80%;
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 15rpx;
    opacity: 1;
  }
  
}
</style>
